<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>新拟态按钮</title>
  </head>
  <style>
	  .app{
	    width: 100%;
	    height: 100vh;
	    background-color: #d1d1d1;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .btn32{
	    height: 70px;
	    padding: 0 20px;
	    cursor: pointer;
	    border: 1px solid rgba(255,255,255,0.8);
	    border-radius: 10px;
	    background-color: #f2fff7;
	    font-size: 32px;
	    font-weight: 700;
	    color: #44d431;
	    box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
	    transition: 0.2s;
	  }
	  .btn32:active{
	    color: #3034d4;
	    background-color: #f2f3ff;
	    border: 1px solid rgba(255,255,255,1);
	    box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
	    transform: translateY(10px) scale(0.98);
	  }
  </style>
  <body>
    <div class="app">
      <button class="btn32">FUN</button>
    </div>
  </body>
</html>